<template>
  <div>
    <el-container>
      <el-header class="header">
        <el-form :inline="true" ref="form" label-width="80px">
          <el-form-item>
            <el-button type="primary" @click="add">添加商品</el-button>
          </el-form-item>
        </el-form>
      </el-header>
      <el-main>
        <div></div>
        <el-table
          ref="multipleTable"
          :data="goodsData"
          tooltip-effect="dark"
          style="width: 100%"
        >
          <el-table-column label="商品主图">
            <template slot-scope="props">
              <el-image
                style="width: 80px; height: 80px"
                :src="props.row.image"
              ></el-image>
            </template>
          </el-table-column>
          <el-table-column
            label="商品名称"
            prop="name"
            width="150px"
          ></el-table-column>
          <el-table-column
            label="商品类别"
            prop="typeName"
            width="100px"
          ></el-table-column>
          <el-table-column
            label="品牌"
            prop="brandName"
            width="100px"
          ></el-table-column>
          <el-table-column
            label="单价"
            prop="price"
            width="100px"
          ></el-table-column>
          <el-table-column label="详情" prop="detail"></el-table-column>
          <el-table-column
            label="库存"
            prop="stock"
            width="100px"
          ></el-table-column>
          <el-table-column
            label="规格"
            prop="specifications"
            width="150px"
          ></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)"
                >编辑</el-button
              >
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="keyword.currentPage"
          :page-size="keyword.pageSize"
          class="page"
          big
          :page-sizes="[1, 2, 3, 4, 5]"
          layout="total,sizes,prev, pager, next"
          :total="total"
        ></el-pagination>
      </el-main>
      <el-dialog :title="title" :visible.sync="dialogVisible" width="30%">
        <el-form :model="goods" ref="goodsForm" label-width="100px">
          <el-form-item label="商品主图：">
            <input type="file" id="file" />
          </el-form-item>
          <el-form-item label="商品名称：" prop="name">
            <el-input v-model="goods.name"></el-input>
          </el-form-item>
          <el-form-item label="商品类别：" prop="typeId" style="padding: 0">
            <el-cascader
              v-model="goods.typeId"
              :options="typeOptions"
              :props="{
                expandTrigger: 'hover',
                value: 'id',
                label: 'name',
                checkStrictly: true,
              }"
              clearable
              style="margin-left: -55px"
            ></el-cascader>
          </el-form-item>
          <el-form-item label="品牌：" prop="brandId">
            <el-select
              v-model="goods.brandId"
              placeholder="请选择"
              style="margin-left: -55px"
            >
              <el-option
                v-for="item in brandData"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
            <!-- <el-input v-model="goods.brandId"></el-input> -->
          </el-form-item>
          <el-form-item label="单价：" prop="price">
            <el-input v-model="goods.price"></el-input>
          </el-form-item>
          <el-form-item label="详情：" prop="detail">
            <el-input v-model="goods.detail"></el-input>
          </el-form-item>
          <el-form-item label="库存：" prop="stock">
            <el-input v-model="goods.stock"></el-input>
          </el-form-item>
          <el-form-item label="规格：" prop="stock">
            <el-input v-model="goods.specifications"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="save">保 存</el-button>
        </span>
      </el-dialog>
    </el-container>
  </div>
</template>

<script>
import { getGoodses, remove, insert, update, setImage } from "@/api/goods.js";
import { selectBrand } from "@/api/brand.js";
import { getTypeList } from "@/api/type.js";
export default {
  name: "",
  data() {
    return {
      dialogImageUrl: "",
      dialogVisible1: false,
      disabled: false,
      typeOptions: [],
      goods: {},
      title: "添加",
      keyword: { currentPage: 1, pageSize: 4 },
      total: 0,
      dialogVisible: false,
      goodsData: [],
      brandData: [],
      brand: {},
    };
  },
  created() {
    this.loadGoodses();
    this.loadBrand();
    this.loadTypes();
  },
  methods: {
    getPath(obj) {
      if (obj) {
        if (window.navigator.userAgent.indexOf("MSIE") >= 1) {
          obj.select();

          return document.selection.createRange().text;
        } else if (window.navigator.userAgent.indexOf("Firefox") >= 1) {
          if (obj.files) {
            return obj.files.item(0).getAsDataURL();
          }
          return obj.value;
        }
        return obj.value;
      }
    },
    loadBrand() {
      selectBrand().then((res) => {
        if (res.data.code === "0000") {
          this.brandData = res.data.data;
        }
      });
    },
    loadTypes() {
      getTypeList().then((res) => {
        if (res.data.code === "0000") {
          this.typeOptions = res.data.data;
        }
      });
    },
    loadGoodses(val) {
      if (val) {
        this.keyword.currentPage = 1;
      }
      getGoodses(this.keyword).then((res) => {
        if (res.data.code === "0000") {
          this.goodsData = res.data.data.records;
          this.total = Number.parseInt(res.data.data.total);
        }
      });
    },
    handleSizeChange(val) {
      this.keyword.pageSize = val;
      this.loadGoodses();
    },
    handleCurrentChange(val) {
      this.keyword.currentPage = val;
      this.loadGoodses(false);
      console.log(`当前页: ${val}`);
    },
    add() {
      this.goods = {};
      this.title = "添加";
      this.dialogVisible = true;
    },
    handleEdit(index, row) {
      this.title = "编辑";
      this.dialogVisible = true;
      this.goods = row;
      console.log(index, row);
    },
    handleDelete(index, row) {
      this.$confirm("确认要删除吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          console.log(row.id);
          remove(row.id).then((res) => {
            if (res.data.code == "0000") {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              this.loadGoodses();
            }
            console.log(res.data.code);
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    save() {
      if (this.title == "添加") {
        var oFiles = document.getElementById("file").files;
        console.log(oFiles[0]);
        var params = new FormData();
        params.append("file", oFiles[0]);
        setImage(params).then((res) => {
          if (res.data.code == "0000") {
            this.goods.image = res.data.data;
            this.goods.typeId = this.goods.typeId[this.goods.typeId.length - 1];
            console.log(this.goods);
            insert(this.goods).then((res) => {
              if (res.data.code === "0000") {
                this.$message.success("添加成功");
                this.dialogVisible = false;
                this.loadGoodses();
                this.$refs.goodsForm.resetFields();
              }
            });
          }
        });
      } else if (this.title == "编辑") {
        var oFiles1 = document.getElementById("file").files;
        console.log(oFiles1[0]);
        var params1 = new FormData();
        params1.append("file", oFiles1[0]);
        setImage(params1).then((res) => {
          if (res.data.code == "0000") {
            this.goods.image = res.data.data;
            this.goods.typeId = this.goods.typeId[this.goods.typeId.length - 1];
            update(this.goods).then((res) => {
              if (res.data.code === "0000") {
                this.$message.success("更新成功");
                this.dialogVisible = false;
                this.loadGoodses();
                this.$refs.goodsForm.resetFields();
              }
            });
          }
        });
      }
    },
  },
};
</script>

<style>
.a-upload {
  padding: 4px 10px;
  height: 20px;
  line-height: 20px;
  position: relative;
  cursor: pointer;
  color: #888;
  background: #fafafa;
  border: 1px solid #ddd;
  border-radius: 4px;
  overflow: hidden;
  display: inline-block;
  *display: inline;
  *zoom: 1;
}

.a-upload input {
  position: absolute;
  font-size: 100px;
  right: 0;
  top: 0;
  opacity: 0;
  filter: alpha(opacity=0);
  cursor: pointer;
}

.a-upload:hover {
  color: #444;
  background: #eee;
  border-color: #ccc;
  text-decoration: none;
}

.file {
  position: relative;
  display: inline-block;
  background: #d0eeff;
  border: 1px solid #99d3f5;
  border-radius: 4px;
  padding: 4px 12px;
  overflow: hidden;
  color: #1e88c7;
  text-decoration: none;
  text-indent: 0;
  line-height: 20px;
}
.file input {
  position: absolute;
  font-size: 100px;
  right: 0;
  top: 0;
  opacity: 0;
}
.file:hover {
  background: #aadffd;
  border-color: #78c3f3;
  color: #004974;
  text-decoration: none;
}
.header {
  text-align: left;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>